<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="<%=getServletContext().getContextPath()%>" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>MCE|Create New Account</title>
    <link rel="stylesheet" href="${contextPath }/resources/css/mce.css"></link>
    <link rel="stylesheet" href="${contextPath }/resources/css/size.css" ></link>
    <link rel="stylesheet" href="${contextPath }/resources/css/jquery-ui.css" ></link>
    <link href='http://fonts.googleapis.com/css?family=Lato:400,300,700,400italic' rel='stylesheet' type='text/css' ></link>
    <script type="text/javascript" src="${contextPath }/resources/js/jquery/jquery-1.10.1.js"></script>
    <script type="text/javascript" src="${contextPath }/resources/js/jquery-ui/jquery-ui.js"></script>
    <script type="text/javascript" src="${contextPath }/resources/js/validation/validation.js"></script>
    
    <script type="text/javascript" src="${contextPath }/resources/js/client/NewAccount.js"></script>
</head>
<body>
    <div class="mceContainer">
        <!--HOME BANNER CONTAINER-->
        <div class="afterHeaderContainer">
            <!--NAVIGATION MENU-->
            <div class="navigationContainer">
                <table class="menuItemContainer">
                    <tr>
                        <!--MCE WEBSITE LINK-->
                        <td class="wd_90">
                            <a class="mceinc" target="_blank" href="http://www.mceinc.com">
                                <img src="${contextPath }/resources/images/element.png" />
                            </a>
                        </td>
                        <!--/MCE WEBSITE LINK-->
                        <!--CONTACT LINK-->
						<td class="wd_90 menuLink"><a href="${contextPath }/contact">Contact</a></td>
						<!--/CONTACT LINK-->
                        <!--MCE WEBSITE LINK-->
                        <td class="logo">
                            <a target="_blank" href="http://www.mceinc.com">
                                <img src="${contextPath }/resources/images/MCE-Mainsite-Icon.png" />
                            </a>
                        </td>
                        <!--/MCE WEBSITE LINK-->
                    </tr>
                </table>
            </div>
            <!--/NAVIGATION MENU-->
        </div>
        <!--/HOME BANNER CONTAINER-->
        <!--MAIN CONTAINER-->
        <div class="mainContainer">
            <table class="wrapContainer">
                <tr>
                    <td class="left">
                        <!--LEFT CONTAINER-->
                        <div class="wrapDataContainer borderRight">
                            <p class="subject">Create New Account</p>
                            <p>
                                To create a new account, complete the form and then click Submit. 
                            </p>
                            <br />
                            <span>Already registered?</span>
                            <c:url var="login" value="/login"></c:url>
                            <a href="${login}" class="mceLinkAction">Sign In</a>
                        </div>
                        <!--/LEFT CONTAINER-->
                    </td>
                    <td>
                        <!--BODY CONTAINER-->
                        <div class="wrapDataContainer">
                            <div style="width:80%; border:none; margin-left:auto; margin-right:auto; display:table;">
                           		<form action="process-result/create-account" method="post">
                                <!--MESSAGE-->
                                <div class="wrap-item-container wd_445">
                                    <div id="messageContent" class="wrap-message-container error">
                                        <span class="ico"></span>
                                        Please fill all required fields highlighted in red.
                                    </div>
                                </div>
                                <!--/MESSAGE-->
                                <!--CUSTOMER NUMBER-->
                                <div class="wrap-item-container wd_445">
                                    <div class="html-control-container">
                                        <div class="label-wrap wd_210">Customer Number <span style="font-style:italic;">(optional)</span></div>
                                        <div class="field-wrap">
                                            <input id="customerNumber" type="text" class="mce wd_200" value="" />
                                            <span id="error_customerNumber" class="span-ico"></span>
                                        </div>
                                    </div>
                                </div>
                                <!--/CUSTOMER NUMBER-->
                                <!--COMPANY NAME-->
                                <div class="wrap-item-container wd_445">
                                    <div class="html-control-container">
                                        <div class="label-wrap wd_210">Company Name<span class="required">*</span></div>
                                        <div class="field-wrap">
                                            <input id="companyName" type="text" class="mce wd_200" value="" />
                                            <span id="error_companyName" class="span-ico"></span>
                                        </div>
                                    </div>
                                </div>
                                <!--/COMPANY NAME-->
                                <!--FIRST NAME-->
                                <div class="wrap-item-container wd_445">
                                    <div class="html-control-container">
                                        <div class="label-wrap wd_210">First Name<span class="required">*</span></div>
                                        <div class="field-wrap">
                                            <input id="firstName" type="text" class="mce wd_200" value="" />
                                            <span id="error_firstName" class="span-ico"></span>
                                        </div>
                                    </div>
                                </div>
                                <!--/FIRST NAME-->
                                <div class="wrap-item-container wd_445">
                                    <div class="html-control-container">
                                        <div class="label-wrap wd_210">Last Name<span class="required">*</span></div>
                                        <div class="field-wrap">
                                            <input id="lastName" type="text" class="mce wd_200" value="" />
                                            <span id="error_lastName" class="span-ico"></span>
                                        </div>
                                    </div>
                                </div>
                                <!--ADDRESS-->
                                <div class="wrap-item-container wd_445">
                                    <div class="html-control-container">
                                        <div class="label-wrap wd_210">Address</div>
                                        <div class="field-wrap">
                                            <input id="address" type="text" class="mce wd_200" value="" />
                                            <span id="error_address" class="span-ico"></span>
                                        </div>
                                    </div>
                                </div>
                                <!--/ADDRESS-->
                                <!--CITY-->
                                <div class="wrap-item-container wd_445">
                                    <div class="html-control-container">
                                        <div class="label-wrap wd_210">City</div>
                                        <div class="field-wrap">
                                            <input id="city" type="text" class="mce wd_200" value="" />
                                            <span id="error_city" class="span-ico"></span>
                                        </div>
                                    </div>
                                </div>
                                <!--CITY-->
                                <!--COUNTRY-->
                                <div class="wrap-item-container wd_445">
                                    <div class="html-control-container">
                                        <div class="label-wrap wd_210">Country</div>
                                        <div class="field-wrap">
                                            <select id="country" class="mce wd_200" style="min-width: 200px;">
                                                <optgroup label="Select">
                                                    <option value="" selected="selected"></option>
                                                    <option value="US">United States</option>
                                                    <option value="CA">Canada</option>
                                                    <option value="ME">Mexico</option>
                                                    <option value="BZ">Brazil</option>
                                                    <option value="GR">Germany</option>
                                                </optgroup>

                                            </select>
                                            <span id="error_country" class="span-ico"></span>
                                        </div>
                                    </div>
                                </div>
                                <!--/COUNTRY-->
                                <!--STATE-->
                                <div class="wrap-item-container wd_445">
                                    <div class="html-control-container">
                                        <div class="label-wrap wd_210">State</div>
                                        <div class="field-wrap">
                                            <select name="state" id="state" class="mce wd_200" style="min-width: 200px;">
                                                <optgroup label="Select">
                                                    <option selected="selected" value=""></option>
                                                    <option value="AK">Alaska
                                                    </option>

                                                    <option value="AL">Alabama
                                                    </option>

                                                    <option value="AR">Arkansas
                                                    </option>

                                                    <option value="AS">American Samoa
                                                    </option>

                                                    <option value="AZ">Arizona
                                                    </option>

                                                    <option value="CA">California
                                                    </option>

                                                    <option value="CO">Colorado
                                                    </option>

                                                    <option value="CT">Connecticut
                                                    </option>

                                                    <option value="DC">District of Columbia
                                                    </option>

                                                    <option value="DE">Delaware
                                                    </option>

                                                    <option value="FL">Florida
                                                    </option>

                                                    <option value="GA">Georgia
                                                    </option>

                                                    <option value="GU">Guam
                                                    </option>

                                                    <option value="HI">Hawaii
                                                    </option>

                                                    <option value="IA">Iowa
                                                    </option>

                                                    <option value="ID">Idaho
                                                    </option>

                                                    <option value="IL">Illinois
                                                    </option>

                                                    <option value="IN">Indiana
                                                    </option>

                                                    <option value="KS">Kansas
                                                    </option>

                                                    <option value="KY">Kentucky
                                                    </option>

                                                    <option value="LA">Louisiana
                                                    </option>

                                                    <option value="MA">Massachusetts
                                                    </option>

                                                    <option value="MD">Maryland
                                                    </option>

                                                    <option value="ME">Maine
                                                    </option>

                                                    <option value="MI">Michigan
                                                    </option>

                                                    <option value="MN">Minnesota
                                                    </option>

                                                    <option value="MO">Missouri
                                                    </option>

                                                    <option value="MP">Northern Mariana Isl
                                                    </option>

                                                    <option value="MS">Mississippi
                                                    </option>

                                                    <option value="MT">Montana
                                                    </option>

                                                    <option value="NC">North Carolina
                                                    </option>

                                                    <option value="ND">North Dakota
                                                    </option>

                                                    <option value="NE">Nebraska
                                                    </option>

                                                    <option value="NH">New Hampshire
                                                    </option>

                                                    <option value="NJ">New Jersey
                                                    </option>

                                                    <option value="NM">New Mexico
                                                    </option>

                                                    <option value="NV">Nevada
                                                    </option>

                                                    <option value="NY">New York
                                                    </option>

                                                    <option value="OH">Ohio
                                                    </option>

                                                    <option value="OK">Oklahoma
                                                    </option>

                                                    <option value="OR">Oregon
                                                    </option>

                                                    <option value="PA">Pennsylvania
                                                    </option>

                                                    <option value="PR">Puerto Rico
                                                    </option>

                                                    <option value="RI">Rhode Island
                                                    </option>

                                                    <option value="SC">South Carolina
                                                    </option>

                                                    <option value="SD">South Dakota
                                                    </option>

                                                    <option value="TN">Tennessee
                                                    </option>

                                                    <option value="TX">Texas
                                                    </option>

                                                    <option value="UT">Utah
                                                    </option>

                                                    <option value="VA">Virginia
                                                    </option>

                                                    <option value="VI">Virgin Islands
                                                    </option>

                                                    <option value="VT">Vermont
                                                    </option>

                                                    <option value="WA">Washington
                                                    </option>

                                                    <option value="WI">Wisconsin
                                                    </option>

                                                    <option value="WV">West Virginia
                                                    </option>

                                                    <option value="WY">Wyoming
                                                    </option>

                                                </optgroup>
                                            </select>
                                            <span id="error_state" class="span-ico"></span>
                                        </div>
                                    </div>
                                </div>
                                <!--/STATE-->
                                <!--STATE OUTSITE CANADA AND US-->
                                <div class="wrap-item-container wd_445">
                                    <div class="html-control-container">
                                        <div class="label-wrap wd_210">State (outside Canada and US)</div>
                                        <div class="field-wrap">
                                            <input id="stateOutSide" type="text" class="mce wd_200" value="" />
                                            <span id="error_stateOutSide" class="span-ico"></span>
                                        </div>
                                    </div>
                                </div>
                                <!--/STATE OUTSITE CANADA AND US-->
                                <!--PORTAL CODE-->
                                <div class="wrap-item-container wd_445">
                                    <div class="html-control-container">
                                        <div class="label-wrap wd_210">Postal Code </div>
                                        <div class="field-wrap">
                                            <input id="portalCode" type="text" class="mce wd_200" value="" />
                                            <span id="error_portalCode" class="span-ico"></span>
                                        </div>
                                    </div>
                                </div>
                                <!--/PORTAL CODE-->
                                <div class="wrap-item-container wd_445">
                                    <div class="html-control-container">
                                        <div class="label-wrap wd_210">Email Address<span class="required">*</span> </div>
                                        <div class="field-wrap">
                                            <input id="email" type="text" class="mce wd_200" value="" />
                                            <span id="error_email" class="span-ico"></span>
                                        </div>
                                    </div>
                                </div>
                                <!--PHONE NUMBER-->
                                <div class="wrap-item-container wd_445">
                                    <div class="html-control-container">
                                        <div class="label-wrap wd_210">Phone Number</div>
                                        <div class="field-wrap">
                                            <input id="phoneNumber" type="text" class="mce wd_200" value="" />
                                            <span id="error_phoneNumber" class="span-ico"></span>
                                        </div>
                                    </div>
                                </div>
                                <!--/PHONE NUMBER-->
                                <!--CONTACT REFERENCE-->
                                <div class="wrap-item-container wd_445">
                                    <div class="html-control-container">
                                        <div class="label-wrap wd_210">Contact Reference</div>
                                        <div class="field-wrap">
                                            <select id="contactReference" class="mce wd_200" style="min-width: 200px;">
                                                <optgroup label="Select">
                                                    <option value="Phone">Phone</option>
                                                    <option value="Email">Email</option>
                                                </optgroup>
                                            </select>
                                            <span id="error_contactReference" class="span-ico"></span>
                                        </div>
                                    </div>
                                </div>
                                <!--/CONTACT REFERENCE-->
								<div class="wrap-item-container" style="text-align: center;">
                                       <span class="ace">(*) Mandatory Fields</span>
                                </div>
                                <div class="wrap-item-container">
                                    <div class="buttonContainer">
                                        <input type="submit" style="float:none;" class="mce" value="SUBMIT" />
                                    </div>
                                </div>
                                <div class="wrap-item-container">
                                    <div class="wrap-message-container question" style="margin-top: 50px; height: auto; font-size: 11px; text-align: center; padding: 10px; color: #666;">
                                        <span style="color: #000">Note:</span> a representative will contact you within the next 24 hours for further information / verification 
                                    </div>
                                </div>
                                <!--/USERNAME INPUT-->
                            </form>
                            </div>

                        </div>
                        <!--/BODY CONTAINER-->
                    </td>
                    <td class="right">
                        <%@include file="right-include/right.jsp" %>
                    </td>
                </tr>
            </table>
        </div>
        <!--/MAIN CONTAINER-->
        <!--FOOTER CONTAINER-->
        <div class="footerContainer">
            <img src="${contextPath }/resources/images/Nidec.jpg" />
            <img src="${contextPath }/resources/images/MCE.jpg" />
            <div class="clearBoth" />
            <p class="copyRight">Copyright 2014 Motion Control Engineering. All Rights Reserved</p>
        </div>
        <!--/FOOTER CONTAINER-->
    </div>

</body>
</html>